<template>
    <div>
        <div id = "computed_props">
                 千米 : <input type = "text" v-model = "kilometers">
                 米 : <input type = "text" v-model = "meters">
              </div>
        	   <p id="info"></p>
    </div>
</template>
<!-- watch 来响应数据的变化 -->
<script>

export default{
  name:"Watch",
  data(){
      return {
        msg:"watch",
        kilometers : 0,
        meters:0,
      }
  } 


}

</script>

<style>
</style>
/****
import Watch from '@/components/WatchDemo' export default{
  和
  name:"Watch",
  data(){
      return {
        msg:"watch",
      }
  }
}   没有直接关系 是两个完全不同的东西，只是恰好都叫 name
和 {
      path: '/watch',
      name: 'Watch',
      component: Watch
    }有直接关系

1. import Watch from '@/components/WatchDemo' 中的 Watch这是什么：这是一个变量名 (variable name)。
作用：你用 import 语句从 @/components/WatchDemo.vue 文件中导入了一个组件对象，
然后给这个对象起了一个在当前文件里可以使用的别名或引用名，叫做 Watch。
特点：
这个名字只在当前这个 JavaScript 文件中有效。
你可以随便给它改名，只要在当前文件里保持一致即可。
它和你导入的那个 .vue 文件内部的任何代码都无关。
示例：改名也完全没问题
// 把导入的组件命名为 MyWatchComponent
import MyWatchComponent from '@/components/WatchDemo'

export default {
  // 在 components 选项中注册时，也使用这个新名字
  components: {
    MyWatchComponent
  },
  // ...
}
然后在你的模板（template）中，就可以这样使用它：
<my-watch-component></my-watch-component>

2.export default { name: "Watch", ... } 中的 name
这是什么：这是 Vue 组件选项 (option) 中的一个属性名。
作用：这个 name 属性是给组件本身起的一个官方名称。
特点：
这个名字是组件身份的一部分，是 “官方” 的。
它在很多地方都有用途，比如：
Vue Devtools：在浏览器的 Vue 开发者工具中，你会看到组件树里显示的就是这个 name，方便你调试。
递归组件：如果一个组件需要在它自己的模板中调用自己（比如做一个树形结构），就必须通过这个 name 来引用。
错误追踪：当发生组件渲染错误时，错误堆栈信息里会包含这个 name，帮助你快速定位问题组件。
在 keep-alive 中使用：可以用 include 或 exclude 选项来指定缓存哪些组件，这里也是根据组件的 name 来匹配的。

3.component: Watch 中的 Watch 就是 import Watch from ... 中导入的那个变量。 前者依赖于后者。


***/
